<template>
  <div class="subpage">
    <view
      style="position: fixed;width:100%;margin-top:70rpx;position: relative;"
      :class="{isHeight: isIos}"
    >
      <view style="position: absolute;width: 50px;text-align: center" @tap="goback">
        <img src="/static/images/goback.png" alt class="backIcon" />
      </view>
      <view style="width: 100%;text-align:center">付款确认</view>
    </view>
    <div :class="['payResult',{'payFailed':isFailed==true}]">
      <img
        :src="isFailed==true?'/static/images/failed_pay.png':'/static/images/success_pay.png'"
        alt
      />
      <div class="payContent">
        <p class="resultText">{{payres}}</p>
        <p v-if="result==1">{{payee}}</p>
        <p v-if="!isFailed">
          支付金额：
          <span style="color: #ff5453;font-size:20rpx">￥</span>
          <span style="color: #ff5453;font-size:40rpx">{{sum}}</span>
        </p>
      </div>
    </div>
    <div class="pay_way" v-if="!isFailed">
      <p>
        <span style="color:#666">付款方式：</span>
        <span style="color:#333">{{payway}}</span>
      </p>
    </div>
    <div class="back">
      <img src="/static/images/pay_back.png" alt />
      <span class="backbtn" @click="back">{{backText}}</span>
    </div>
  </div>
</template>
<script>
import storage from "@/utils/storage";
export default {
  data() {
    return {
      isFailed: Boolean,
      result: "",
      backText: "",
      payee: "",
      sum: "",
      way: "",
      payway: "",
      payres: "",
      isIos: false
    };
  },
  onLoad(options) {
    this.result = options.result || 1;
    this.way = options.way || 1;
    if (this.way == 1) {
      this.payway = "现金支付";
    } else {
      this.payway = "医保支付";
    }
    console.log("this.result", this.result);
    if (this.result == 2) {
      this.isFailed = true;
      this.payres = "支付失败";
      this.backText = "返回";
      console.log("isFailed", this.isFailed);
    } else {
      this.isFailed = false;
      this.payres = "支付成功";
      this.backText = "查看详情";
      this.sum = options.sum;
      this.payee = options.payee || "武汉大学人民医院（湖北省人民）";
      console.log(" this.payee", this.payee, this.sum);
    }
    console.log(" this.isFailed", this.isFailed);
  },
  mounted() {
    var that = this;
    mpvue.getSystemInfo({
      success: function(res) {
        var model = res.model;
        console.log("model", model);
        if (
          model.search("iPhone") != -1 &&
          (model.search("X") != -1 || model.search("11") != -1)
        ) {
          that.isIos = true;
        } else {
          that.isIos = false;
        }
      }
    });
  },
  methods: {
    back() {
      console.log("111", "back");
      var step = this.$storage.getCardeStatus();
      // if()
      console.log("step", step);
      wx.navigateBack({
        delta: step*1
      });
    },
    goback() {
      console.log("222", "back");
      var step = this.$storage.getCardeStatus();
      console.log("step", step);
      wx.navigateBack({
        delta: step*1
      });
    }
  }
};
</script>
<style lang='less' scoped>
.subpage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  .backIcon {
    width: 34rpx;
    height: 36rpx;
  }
  .isHeight {
    margin-top: 110rpx !important;
  }
}
.payResult {
  width: 85%;
  display: flex;
  margin-top: 60rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
  color: #333;
  font-weight: 300;
  img {
    width: 144rpx;
    height: 144rpx;
    margin-top: 100rpx;
    margin-bottom: 60rpx;
  }
  .payContent {
    p {
      width: 100%;
      margin: 26rpx 0;
      text-align: center;
    }
    .resultText {
      color: #ff5453;
      font-size: 48rpx;
    }
  }
}
.payFailed {
  margin-top: 220rpx;
}
.pay_way {
  width: 70%;
  padding-top: 60rpx;
  border-top: 1rpx solid #e9e9e9;
}
.back {
  position: absolute;
  bottom: 50rpx;
  img {
    width: 32rpx;
    height: 30rpx;
    margin-right: 20rpx;
    vertical-align: middle;
  }
  .backbtn {
    color: #258ff8;
  }
}
</style>